<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- 
      一般用来控制一部分区域的显示内容；
      设置到数据处理一般在 "计算属性"、"methods" 中；
    -->
    <!-- <h1 v-if="score == 40">1</h1>
    <h1 v-else-if="score == 60">2</h1>
    <h1 v-else-if="score == 80">3</h1>
    <h1 v-else>4</h1>
    <button @click="setVal()">切换</button> -->
    <h1>{{filtration}}</h1>
    <button @click="setVal()">切换</button>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        score:100,
        message:'你好啊，李银河！',
        isShow:true
      }
    },
    methods:{
      setVal() {
        if(this.score == 100) {
          this.score = 40
        } else {
          this.score += 20
        }
      }
    },
    computed:{
      filtration() {
        switch(this.score) {
          case 40:
            return '不及格'
            break;
          case 60:
            return '及格'
            break;
          case 80:
            return '良好'
            break;
          case 100:
            return '优秀'
            break;
        }
      }
    }
  })
  </script>
</body>
</html>